<script setup>
import {	ref,	watch} from 'vue';
import { uniFetch } from '../../api/uni-fetch';
import { useUserStore } from "/store/user.js"

const store = useUserStore()

// 打开popup
const popup = ref(null)
const goodsInfo = ref({})
const openPop = (info) => {
	goodsInfo.value = info
	console.log(info);
	popup.value.open('bottom')
}

// 购买数量
const count = ref(1)


// 立即购买
function buyNow() {
	uni.navigateTo({
		url: `/subpkg/CreatOrder/CreatOrder?goodsId=${goodsInfo.value.id}&num=${count.value}`
	})
	popup.value.close()
}

// 加入购物车
async function addCart() {
	const res = await uniFetch.post('/shop-cart/add', {
		product_id: goodsInfo.value.id,
		count: count.value,
		app_id: uni.appId
	})
	console.log(res, '加入购物车');
	if (res.code === 10000) {
		popup.value.close()
		return uni.showToast({ title: '已加入购物车' })
	}
	if (res.code === 20001) {
		uni.showToast({ title: '您未登录', icon: 'none' })
		return
	}
	uni.showToast({ title: '操作失败', icon: 'none' })
}

const props = defineProps({
	goods: Object
})

const popDetail = ref({})

// watch(() => props.goods, () => {
// 	popDetail.title = props.goods;
// }, { deep: true, immediate: true, })



defineExpose({
	openPop
})
</script>

<template>
	<uni-popup ref="popup" background-color="#fefefe" :safe-area="true">
		<view class="popup-box">
			<view class="goods-info">
				<view class="goods-info-img">
					<image :src="goodsInfo.banner_image" mode="aspectFit"></image>
				</view>
				<view class="goods-info-right">
					<view class="goods-info-title">
						{{ goodsInfo.title }}
					</view>
					<view class="goods-info-price">
						<view class="goods-info-menber" v-if="store.memberInfo.is_member">
							专属价: <text> ¥{{ goodsInfo.member_price }}</text>
						</view>
						<view class="goods-info-menber" v-else>
							专属价: <text> ¥{{ goodsInfo.price }}</text>
						</view>
						<view class="goods-info-unmenber">
							<view>
								市场价:¥{{ goodsInfo.old_price }}
							</view>
							<view>
								已售:{{ goodsInfo.buyer }}
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="goods-describe">
				{{ goodsInfo.sub_title }}
			</view>

			<view class="goods-num">
				<view class="choose">
					选择数量
				</view>
				<view class="choose">
					<u-number-box v-model="count" :min="1" :max="9999"></u-number-box>
				</view>
			</view>


			<view class="goods-controls">
				<button class="add-cart" @click="addCart">加入购物车</button>
				<button class="buy-now" @click="buyNow">立即购买</button>
			</view>

		</view>

		<view class="safe-area"></view>
	</uni-popup>
</template>



<style lang="scss">
@import '/uni.scss';
.safe-area {
  height: calc(env(safe-area-inset-bottom) + 100rpx);
  background: #fff;
}
.popup-box {
	padding: 20rpx 20rpx 80rpx;
	background-color: #fefefe;
	box-sizing: border-box;

	.goods-info {
		height: 285rpx;
		border-bottom: 1rpx solid #f1f1f1;

		.goods-info-img {
			float: left;
			margin-right: 25rpx;
			width: 265rpx;
			height: 265rpx;
			// background-color: pink;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.goods-info-right {
			float: left;
			height: 275rpx;

			.goods-info-title {
				margin-bottom: 55rpx;
				display: -webkit-box;
				-webkit-line-clamp: 3;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
				height: 135rpx;
				width: 400rpx;
				color: #101010;
				font-size: 30rpx;
				line-height: 45rpx;
			}

			.goods-info-menber {
				font-size: 25rpx;
				color: #aaaaaa;

				text {
					font-size: 38rpx;
					color: $custom-theme-red;
				}
			}

			.goods-info-unmenber {
				display: flex;
				justify-content: space-between;
				font-size: 24rpx;
				color: #aaaaaa;
			}
		}

	}

	.goods-describe {
		margin-top: 20rpx;
		width: 80%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		color: #aaa;
	}

	.goods-num {
		margin-top: 30rpx;
		display: flex;
		justify-content: space-between;
		color: #aaa;
	}

	.goods-controls {
		margin-top: 50rpx;
		display: flex;
		margin-bottom: -50rpx;

		.add-cart {
			background-color: $custom-theme-color;
			color: #fefefe;
			height: 85rpx;
			border-radius: 43rpx;
			font-size: 32rpx;
			line-height: 85rpx;
			width: 285rpx;
		}

		.buy-now {
			background-color: $custom-theme-red;
			color: #fefefe;
			height: 85rpx;
			border-radius: 43rpx;
			font-size: 32rpx;
			line-height: 85rpx;
			width: 285rpx;
		}
	}
}
</style>